<template>
  <dv-border-box-10>
    <div class="biaogeneirong">
      <div class="dingbuxuanzekuang">
        <!-- 区 -->
        <span class="xuanzekuangqianwenzi"> {{ $store.state.quname }}:</span>
        <!-- 镇选择器 -->
        <zhenselect v-on:selectzhenfangfa="selectzhenfangfa"></zhenselect>
        <!-- 村选择器 -->
        <span class="xuanzekuangqianwenzi">村:</span>
        <cunselect v-on:selectcunfangfa="selectcunfangfa" ref="cun"></cunselect>
      </div>
      <div class="biaoge">
        <p style="text-align: right">
          <b>占地面积：{{ cunxinxi.footprint }}平方千米</b>
          <b>现有人口：{{ cunxinxi.population }}人</b>
        </p>
        <h2>村简介</h2>
        <p style="width: 100%; font-size: 18px; line-height: 26px">
          {{ cunxinxi.introduction }}
        </p>
        <div class="cunImg">
          <zhaopian :data="images" :max-show="2"></zhaopian>
        </div>
      </div>
    </div>
  </dv-border-box-10>
</template>
<script>
import zhenselect from "../../components/selectitem/zhenselect";
import cunselect from "../../components/selectitem/cunselect";
import zhaopian from "../../components/images";
export default {
  data() {
    return {
      cishu: 0,
      selectcun: {
        quname: "",
        zhenid: "",
        cunid: "",
      },
      cunxinxi: {},
      images: [],
    };
  },
  methods: {
    // 选择镇触发方法
    selectzhenfangfa(value) {
      this.selectzhen = value + "";
      this.$refs.cun.zhenxiadecun(value);
    },
    // 选择村后触发方法
    selectcunfangfa(value) {
      this.selectcun.cunid = value;
      this.selectcun.zhenid = this.selectzhen;
    },
    // 更新村庄
    gengxincunzhuang() {
      var params = new URLSearchParams();
      params.append("id", this.selectcun.cunid);
      this.$axios
        .post("/leader/village/villageIntroduce", params)
        .then((response) => {
          this.cunxinxi = response.data.data.data[0];
          this.images = response.data.data.listUrl;
        })
        .catch((err) => {});
    },
  },
  watch: {
    selectcun: {
      handler: function () {
        this.gengxincunzhuang();
      },
      deep: true,
    },
  },
  components: {
    zhenselect,
    cunselect,
    zhaopian,
  },
};
</script>

<style lang="less" scoped>
.biaogeneirong {
  height: 95%;
  width: 94%;
  padding: 2% 3%;
}
.dingbuxuanzekuang {
  display: flex;
  align-items: center;
}
.xuanzekuangqianwenzi {
  margin: 0 10px;
}
.biaoge {
  margin: 20px 0;
  height: 88%;
}
.img {
  text-align: center;
  width: 10%;
  height: 10%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.demo-image__lazy {
  text-align: center;
}.cunImg{
  max-height: 80%;
  overflow: auto;
}.cunImg::-webkit-scrollbar {
    width: 6px;
    height: 0px;
}
/*设置滚动条上的滚动滑块样式*/
.cunImg::-webkit-scrollbar-thumb {
    background: transparent;
}

/*鼠标位于内容上时，滚动条样式*/
.cunImg:hover::-webkit-scrollbar {
    width: 6px;
    height: 0px;
    background: rgb(187, 188, 190);
    border-radius: 6px;
}

/*鼠标位于内容上时，滚动滑块样式*/
.cunImg:hover::-webkit-scrollbar-thumb {
    background: #296ebd;
    border-radius: 10px;
}

</style>